<template>
  <div class="">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      style="margin-left: 20px; margin-top: 10px"
    >
      <el-form-item label="领用人" prop="Recipient">
        <el-input
          v-model="queryParams.Recipient"
          placeholder="请输入"
          clearable
          size="small"
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="领用物品" prop="Collectarticles">
        <el-input
          v-model="queryParams.Collectarticles"
          placeholder="请输入"
          clearable
          size="small"
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="领取时间" label-width="100px">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button size="mini" @click="resetForms('queryForm')">重置</el-button>
      </el-form-item>

      <el-row>
        <el-col :span="24">
          <el-button type="primary" size="mini" @click="newlyadded"
            >新增物品领用</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: -8px; margin-left: 15px"> </el-row>

    <el-table v-loading="loading" :data="tableData" >
      <el-table-column prop="materialCode" label="物品编号" align="center"></el-table-column>
      <el-table-column prop="collectUser" label="领用人" align="center">
      </el-table-column>
      <el-table-column prop="materialName" label="领用物品" align="center">
      </el-table-column>
      <el-table-column prop="collectNum" label="领用数量" align="center">
      </el-table-column>
      <el-table-column prop="isRepay" label="是否需要归还" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isRepay == 0">
            <el-tag>否</el-tag>
          </span>
          <span v-if="scope.row.isRepay == 1">
            <el-tag type="success">是</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="isRepay" label="是否已归还" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.repayTime">
            <el-tag  type="success">已归还</el-tag>
          </span>
          <span  v-else>
            <span v-if="scope.row.isRepay == 0">
              -
            </span>
            <span v-else>
              <el-tag type="info">未归还</el-tag>
            </span>
            
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="repayTime" label="归还时间" width="170px" align="center">
      </el-table-column>
      <el-table-column prop="collectTime" label="领取时间" width="170px"  align="center">
      </el-table-column>
      <el-table-column prop="repayTime" label="更新时间" width="170px" align="center">
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="top">
            <el-button
              v-if="scope.row.repayTime == undefined ? true : false"
              @click="modify(scope.row)"
              type="success"
              icon="el-icon-edit"
              circle
              size="mini"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button
              @click="handleDelete(scope.row)"
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="归还" placement="top">
            <el-button
              v-if="scope.row.repayTime == null && scope.row.isRepay == 1 ? true : false"
              @click="cancel(scope.row)"
              type="warning"
              icon="el-icon-refresh-left"
              circle
              size="mini"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <el-button
            v-if="scope.row.repayTime != undefined ? true : false"
              icon="el-icon-search"
              @click="see(scope.row)"
              size="mini"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="float: right; margin-right: 20px; margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[2, 3, 5, 10]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="新增领用物品"
      :visible.sync="dialogVisible"
      width="50%"
      @close="resetForm('form1')"
    >
      <el-form :model="form1" :rules="rules1" ref="form1" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="领用物品编码" prop="materialName" >
              <el-input v-model="form1.materialName" placeholder="请输入" clearable size="small"  style="width: 60%"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用物品名称" prop="materialName" >
              <el-input v-model="form1.materialName" placeholder="请输入" clearable size="small"  style="width: 60%"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="领用人"  prop="collectUser">
              <el-input
                v-model="form1.collectUser"
                placeholder="请输入"
                clearable
                size="small"
                style="width: 60%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用数量" prop="collectNum">
              <el-input-number v-model="form1.collectNum" @change="handleChange" :min="1" :max="100" label="描述文字" size="small" ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="10">
            <el-form-item label="领取时间" prop="collectTime" >
              <el-date-picker
                value-format="yyyy-MM-dd hh:mm:ss"
                v-model="form1.collectTime"
                type="datetime"
                placeholder="选择日期时间"
                style="width: 60%"
                size="small"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="10">
            <el-form-item label="是否要归还" label-width="100px" prop="isRepay">
              <el-select
                size="small"
                v-model="form1.isRepay"
                style="width: 200px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine('form1')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改领用物品"
      :visible.sync="dialogVisible1"
      width="50%"
      @close="resetForm('form2')"
    >
      <el-form :model="form2" ref="form2">
        <el-row>
          <el-col :span="8">
            <el-form-item label="领用人" label-width="70px" prop="collectUser">
              <el-input
                v-model="form2.collectUser"
                placeholder="请输入"
                clearable
                size="small"
                style="width: 120px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="领用物品"
              label-width="80px"
              prop="materialName"
            >
              <el-input
                v-model="form2.materialName"
                placeholder="请输入"
                clearable
                size="small"
                style="width: 120px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="领用数量" prop="collectNum">
              <el-input-number
                v-model="form2.collectNum"
                @change="handleChange"
                :min="1"
                :max="100"
                label="描述文字"
                size="small"
                style="width: 150px"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item
              label="领取时间"
              label-width="80px"
              prop="collectTime"
            >
              <el-date-picker
                value-format="yyyy-MM-dd hh:mm:ss"
                format="yyyy-MM-dd hh:mm:ss"
                v-model="form2.collectTime"
                type="datetime"
                placeholder="选择日期时间"
                style="width: 200px"
                size="small"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="是否要归还" label-width="100px" prop="isRepay">
              <el-select
                size="small"
                v-model="form2.isRepay"
                style="width: 200px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="Submit('form2')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="查看领用物品" :visible.sync="dialogVisible2" width="50%">
      <el-form :model="form2" ref="form2">
        <el-row>
          <el-col :span="8">
            <el-form-item label="领用人" label-width="70px" prop="collectUser">
              <el-input
                :disabled="true"
                v-model="form2.collectUser"
                placeholder="请输入"
                clearable
                size="small"
                style="width: 120px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="领用物品"
              label-width="80px"
              prop="materialName"
            >
              <el-input
                :disabled="true"
                v-model="form2.materialName"
                placeholder="请输入"
                clearable
                size="small"
                style="width: 120px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="领用数量" prop="collectNum">
              <el-input-number
                :disabled="true"
                v-model="form2.collectNum"
                @change="handleChange"
                :min="1"
                :max="100"
                label="描述文字"
                size="small"
                style="width: 150px"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item
              label="领取时间"
              label-width="80px"
              prop="collectTime"
            >
              <el-date-picker
                :disabled="true"
                value-format="yyyy-MM-dd hh:mm:ss"
                format="yyyy-MM-dd hh:mm:ss"
                v-model="form2.collectTime"
                type="datetime"
                placeholder="选择日期时间"
                style="width: 200px"
                size="small"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="是否要归还" label-width="100px" prop="isRepay">
              <el-select
                size="small"
                v-model="form2.isRepay"
                style="width: 200px"
                disabled
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
  
  <script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  findPersonPlanPageList,
  addUser,
  updateDept,
  delUser,
  cancelDocumentApply,
} from "@/api/workflow/goods";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      chexiao: {
        id: 0,
      },
      ids: "",
      options: [
        {
          value: "0",
          label: "否",
        },
        {
          value: "1",
          label: "是",
        },
      ],

      dateRange: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      form1: {
        collectUser: "", //领用人
        materialName: "", //领用物品
        collectNum: "", //领用数量
        collectTime: "", //领用时间
        isRepay: "", //是否归还
      },
      form2: {
        collectNum: "",
        collectTime: "",
        collectUser: "",
        createBy: "",
        createTime: "",
        id: 0,
        isRepay: "",
        materialCode: "",
        materialName: "",
        modifyBy: "",
        modifyTime: "",
        pageNum: 1,
        pageSize: 10,
        repayTime: "",
      },
      reset() {
        this.form1 = {
          collectUser: null, //领用人
          materialName: null, //领用物品
          collectNum: null, //领用数量
          collectTime: null, //领用时间
          isRepay: null, //是否归还
        };
      },
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParams: {
        Recipient: "",
        Collectarticles: "",
        planBeginTime: "",
        planEndTime: "",
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      rules1: {
        collectUser: [
          { required: true, message: "请输入领用人", trigger: "blur" },
        ],
        materialName: [
          { required: true, message: "请选择领用物品", trigger: "blur" },
        ],
        collectTime: [
          {
            // type: "date",
            required: true,
            message: "请选择日期",
            trigger: "blur",
          },
        ],
        isRepay: [
          { required: true, message: "请选择是否要归还", trigger: "change" },
        ],
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    see(row) {
      this.dialogVisible2 = true;
      this.form2 = JSON.parse(JSON.stringify(row));
      console.log(this.form2);
    },

    cancel(row) {
      //归还物品
      this.$confirm("确定要归还物品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          this.chexiao.id = row.id;

          cancelDocumentApply(this.chexiao).then((response) => {
            if (response.code === 200) {
              this.getData();
              this.loading = false;
              this.show=false;
            } else {
              this.msgError(response.message);
            }
            this.loading = false;
          });
          this.$message({
            type: "success",
            message: "归还成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消归还",
          });
        });
    },
    modify(row) {
      this.dialogVisible1 = true;
      this.form2 = JSON.parse(JSON.stringify(row));
      console.log(this.form2);
    },
    handleDelete(row) {
      //删除
      console.log(row);
      this.$confirm("确定要删除物品申请吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {};
          data.id = row.id;
          delUser(data).then((response) => {
            this.getData();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForms(queryForm) {
      this.dateRange = [];
      this.$refs[queryForm].resetFields();
    },
    determine() {
      //新增
      this.$refs["form1"].validate((valid) => {
        if (valid) {
          addUser(this.form1).then((response) => {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.dialogVisible = false;
            this.getData();
          });
        }
      });
    },
    shijianc(time) {
      let date = new Date(time);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      time = Y + M + D + h + m + s;
      return time;
    },
    Submit() {
      //修改
      this.$refs["form2"].validate((valid) => {
        if (valid) {
          if (this.form2.id != null) {
            updateDept(this.form2).then((response) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.dialogVisible1 = false;
              this.getData();
            });
          }
        }
      });
    },
    handleChange(value) {
      console.log(value);
    },
    handleSizeChange(size) {
      //分页
      this.queryParams.pageSize = size;
      this.getData();
    },
    handleCurrentChange(num) {
      this.queryParams.pageNum = num;
      this.getData();
    },
    newlyadded() {
      //新增按钮
      this.dialogVisible = true;
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getData();
    },
    getData() {
      this.loading = true;
      findPersonPlanPageList(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then((response) => {
        console.log(response, "123");
        this.tableData = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
      console.log(this.tableData, "1");
    },
  },

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
  <style lang='scss' scoped>
// @import url(); 引入公共css类
</style>
  